<!-- 角色=> 个人  -- 征信查询 -->
<template>
  <div class="main">
    <el-tabs type="border-card">
      <el-tab-pane label="个人征信数据系统">
        <PureTableBar class="list_hei">
          <template #buttons>
            <el-button type="primary" :icon="useRenderIcon(AddFill)" @click="GetRepot()">
              获取征信报告
            </el-button>
          </template>
          <template v-slot="{ size, checkList }">
            <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading"
              size="small" :data="dataList" :columns="columns" :checkList="checkList" :pagination="pagination"
              max-height="600" :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }" @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </pure-table>
          </template>
        </PureTableBar>
      </el-tab-pane>
      <el-tab-pane label="个人征信报告">
        <PureTableBar class="list_hei">
          <template v-slot="{ size, checkList }">
            <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading2"
              size="small" :data="dataList2" :columns="columns2" :checkList="checkList" :pagination="pagination2"
              max-height="600" :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }" @size-change="handleSizeChanges" @current-change="handleCurrentChanges">
              <template #operation="{ row }">
                <el-button type='primary' size="small" text @click="CheckCreditReport(row)">
                  查看征信报告
                </el-button>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </el-tab-pane>
    </el-tabs>


    <!-- 获取征信报告弹窗 -->
    <ReDialog :width="700" :height="550" :models="RepotVisible" @Closes="CloseApplication(RepotFroms)">
      <template #header>
        <h2 style="text-align: center;">个人征信报告查询申请表</h2>
      </template>
      <template #main>
        <el-form ref="RepotFroms" :model="RepotFrom" :rules="rules" :inline="true" label-width="150px">
          <p class="form_title">申请人信息</p>
          <el-form-item label="申请人名称" prop="ApplyName">
            <el-input placeholder="申请人名称" class="!w-[200px]" v-model.trim="RepotFrom.ApplyName" />
          </el-form-item>
          <el-form-item label="证件类型">
            <el-input placeholder="证件类型" class="!w-[200px]" disabled value="身份证" />
            <!-- <el-button type="text">身份证</el-button> -->
          </el-form-item>
          <el-form-item label="证件号码" prop="ApplyNumber">
            <el-input placeholder="证件号码" class="!w-[200px]" v-model.trim="RepotFrom.ApplyNumber" />
          </el-form-item>
          <el-form-item label="申请人有效联系电话" prop="ApplyPhone">
            <el-input placeholder="电话" class="!w-[200px]" v-model.trim="RepotFrom.ApplyPhone" />
          </el-form-item>
          <p class="form_title">代理人信息</p>
          <el-form-item label="代理人名称" prop="AgencyName">
            <el-input placeholder="代理人名称" class="!w-[200px]" v-model.trim="RepotFrom.AgencyName" />
          </el-form-item>
          <el-form-item label="代理人证件类型">
            <el-input placeholder="证件类型" class="!w-[200px]" disabled value="身份证" />
          </el-form-item>
          <el-form-item label="代理人证件号码" prop="AgencyNumber">
            <el-input placeholder="代理证件号码" class="!w-[200px]" v-model.trim="RepotFrom.AgencyNumber" />
          </el-form-item>
          <el-form-item label="代理人有效联系电话" prop="AgencyPhone">
            <el-input placeholder="代理电话" class="!w-[200px]" v-model.trim="RepotFrom.AgencyPhone" />
          </el-form-item>
          <p class="form_title">申请人授权</p>
          <el-row>
            <el-col :span="24">已授权查询申请人信用报告</el-col>
          </el-row>
          <p class="form_title">查询信息</p>
          <el-row>
            <el-col :span="6">
              版本信息
            </el-col>
            <el-col :span="6">
              最新
            </el-col>
            <el-col :span="6">
              查询机构
            </el-col>
            <el-col :span="6">
              中国人民银行
            </el-col>
          </el-row>
          <p class="form_title">签字确认</p>
          <el-form-item label="申请人签字" prop="ApplySign">
            <el-input placeholder="申请人签字" class="!w-[200px]" v-model.trim="RepotFrom.ApplySign" />
          </el-form-item>
          <el-form-item label="申请日期" prop="ApplyDate">
            <el-date-picker type="date" format="YYYY-MM-DD" class="!w-[200px]" value-format="YYYY-MM-DD"
              v-model="RepotFrom.ApplyDate" placeholder="请选择日期时间" />
          </el-form-item>

        </el-form>
      </template>
      <template #footer>
        <el-button @click="SubmitApplication(RepotFroms)" :loading="btnloading" type="primary">申请</el-button>
        <el-button @click="CloseApplication(RepotFroms)"> 取消 </el-button>
      </template>
    </ReDialog>
    <!-- 查看征信报告 -->
    <ReDialog :width="700" :height="550" :models="CreditReportVisible" @Closes="CreditReportVisible = false">
      <template #header>
        <h2 style="text-align: center;">个人信用报告</h2>
      </template>
      <template #main>
        <el-scrollbar height="450px">
          <div class="showBG" v-html="ShowReport"></div>
        </el-scrollbar>
      </template>
      <template #footer>
      </template>
    </ReDialog>
    <!-- <el-dialog v-model="CreditReportVisible" :close-on-click-modal="false" top="10vh" width="45%">
      <template #header>
        <h2 style="text-align: center;">个人信用报告</h2>
      </template>
      <el-scrollbar height="70vh">
        <div class="showBG" v-html="ShowReport"></div>
      </el-scrollbar>
    </el-dialog> -->
  </div>
</template>
<script setup lang="ts">
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { usePersonCredit } from "./hook/PersonCredit";
const {
  RepotFroms,
  dataList,
  dataList2,
  loading,
  loading2,
  RepotVisible,
  CreditReportVisible,
  pagination,
  pagination2,
  columns,
  columns2,
  ShowReport,
  rules,
  RepotFrom,
  btnloading,
  GetRepot,
  handleSizeChange,
  handleCurrentChange,
  handleSizeChanges,
  CheckCreditReport,
  handleCurrentChanges,
  CloseApplication,
  SubmitApplication,
  ShowRepot
} = usePersonCredit()
import AddFill from "@iconify-icons/ri/add-circle-line";

</script>

<style scoped lang="scss">
@import url(@/style/CreditComm.scss);

::deep(.el-tabs) {
  height: 99%;
}

:deep(.el-dialog__body) {
  padding: 10px 0;
}

:deep(.el-row) {
  margin-bottom: 10px;
}

:deep(.el-dialog__footer) {
  text-align: center;
}

:deep(.el-tabs__content) {
  padding: 5px 15px;
}

:deep(.mt-6) {
  margin: 0;
}

.form_title {
  text-align: center;
  padding: 5px;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
  background-color: #f3f3f3;
  color: #409eff;
}

:deep(.showBG) {
  font-size: 14px;

  td {
    border: 1px solid;
  }

  h3 {
    text-align: center;
  }

  ol,
  div {
    text-align: left;
  }
}
</style>
